<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>孩子</title>
<link rel="stylesheet" href="/css/index.css" type="text/css">
<script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.SuperSlide.2.1.3.js"></script>
</head>
<body>
   <div class="topbanner">任务进度详情</div>
   <div class="main children">
  		<img class="ring" src="/img/two.png" alt=""/>
  		<img class="ring2" src="/img/two.png" alt=""/>
   		<div class="boyTop">
   			<!--新增切换按钮开始-->
   			<div class="HnewBtn">
				<ul>
					<li class="on">老师的任务</li>
					<li>家长的任务</li>
				</ul>
			</div>
			<!--新增切换按钮结束-->
			<!--<div class="txt-left">-->
				<!--<img src="/img/gift.jpg" alt=""/><p>彩色魔方套装 二三四五阶2345阶玩具</p>-->
			<!--</div>-->
			<div class="txt-right">
				<h3>任务进度还差 <span><i id="unfinishedDay"></i>天，继续加油！</span></h3>
				<ul>
					<li><i id="finishDay"></i> 天<span>已完成天数</span></li>
					<li><i id="countGrade"></i><span>平均等级</span></li>
					<li><i id="youxiaotime"></i> h<span>平均有效使用时长</span></li>
				</ul>
			</div>
   		</div>

   		<div class="boyBotton">
   			<h3>任务记录</h3>
   			<table border="1" cellspacing="0" cellpadding="0" width="100%">
   			  <thead>
   			  	<tr>
   			  		<th>日期</th>
   			  		<th>有效使用时长(h)</th>
   			  		<th>评级</th>
   			  	</tr>
   			  </thead>
			  <tbody id="taskXQ">
			  </tbody>
			</table>
   		</div>
   		
   		<div class="boyBotton HHxiangqing">
   			<h3><span id="d"></span>任务详情</h3>
   			<table border="1" cellspacing="0" cellpadding="0" width="100%">
   			  <thead>
   			  	<tr>
   			  		<th>任务名称</th>
   			  		<th>任务目标</th>
   			  		<th>实际完成</th>
   			  	</tr>
   			  </thead>
			  <tbody>
				<tr>
				  <td>平均单次阅读时长</td>
				  <td  class="excellent" id="avgRead"></td>
				  <td  class="excellent" id="avgRead0"></td>
				</tr>
				<tr>
				  <td>平均阅读距离</td>
				  <td class="excellent" id="avgReadDistance"></td>
				  <td class="excellent" id="avgReadDistance0"></td>
				</tr>
				<tr>
				  <td>平均单次看手机时长</td>
				  <td class="excellent" id="avgLookPhone"></td>
				  <td class="excellent" id="avgLookPhone0"></td>
				</tr>
				<tr>
				  <td>平均坐姿倾斜度</td>
				  <td class="excellent" id="avgSitTilt"></td>
				  <td class="excellent" id="avgSitTilt0"></td>
				</tr>
				<tr>
				  <td>平均户外时长</td>
				  <td class="excellent" id="avgOut"></td>
				  <td class="excellent" id="avgOut0"></td>
				</tr>
				<tr>
				  <td>平均阅读光照</td>
				  <td class="excellent" id="avgLight"></td>
				  <td class="excellent" id="avgLight0"></td>
				</tr>
				<tr>
				  <td>平均单次看电脑电视时长</td>
				  <td class="excellent" id="avgLookTv"></td>
				  <td class="excellent" id="avgLookTv0"></td>
				</tr>
				<tr>
				  <td>有效使用监护仪总时长</td>
				  <td class="excellent" id="effectiveUseTime"></td>
				  <td class="excellent" id="effectiveUseTime0"></td>
				</tr>
			  </tbody>
			</table>
   		</div>
   </div>
</body>
<script th:inline="javascript"+
>
    var idCard = [[${idCard}]]
//    var url = 'http://localhost:8083'
      var url = 'http://eyemonitor-api.dddmaker.com'
    $(function () {
        var  type;
        $('.HnewBtn li').click(function () {
            $(this).siblings().removeClass('on').end().addClass('on');  // 删除其他兄弟元素的样式
            $('.giftBody').html("")
            if ($('.HnewBtn ul .on').text() == "老师的任务") {
                type = 2
            } else if ($('.HnewBtn ul .on').text() == "家长的任务") {
                type = 0
            }
            $.ajax({
                cache: true,
                type: "get",
                url: url + "/api/gift/getTaskFromPC?idCard=" + idCard + "&type=" + type,
                dataType: "jsonp",
                jsonp: "callback",
                async: false,
                success: function (result) {
                    console.log(result);
                    var data=result.data || {};
					$("#unfinishedDay").text(data.unfinishedDay==undefined?'':data.unfinishedDay);
					$("#finishDay").text(data.finishDay==undefined?'':data.finishDay);
					$("#countGrade").text(getPingJI(data.countGrade));
					$("#youxiaotime").text(data.youxiaotime);
					var taskId=data.id==undefined?0:data.id;
					console.info("==================");
					console.info(taskId);
                    console.info("==================");

                    $.ajax({
						cache: true,
						type: "get",
						url: url + "/api/gift/getTaskDetailPC?taskId=" +taskId ,
						dataType: "jsonp",
						jsonp: "callback",
						async: false,
						success: function (result) {
							console.info(result);
							var data = result.data||[];
							var tr="";
							for(var i=0;i<data.length;i++) {
								var day = data[i].day==undefined?0:data[i].day;
								var hourtime= data[i].hourtime==undefined?0:data[i].hourtime;
								var eyeRate= getPingJI(data[i].eyeRate);
								var tid = data[i].id==undefined?0:data[i].id;
								tr += '<tr onclick="getDetail(\''+tid+'\',\''+taskId+'\',\''+day+'\')">'
								tr += '<input type="hidden" value="'+data[i].id+'">'
								tr += '<td>' + day + '</td>'
								tr += '<td>' + hourtime + 'h</td>'
								tr += '<td class="excellent">' + eyeRate + '</td>'
								tr += '</tr>';
							}
							$("#taskXQ").html(tr);
							var id = data[0]==undefined?0:data[0].id;
							var day=data[0]==undefined?0:data[0].day;
							getDetail(id,taskId,day)}
                        });
					if(result.code==-1){
						alert(result.msg);
                        $("#avgRead").text('');
                        $("#avgReadDistance").text('');
                        $("#avgLookPhone").text('');
                        $("#avgSitTilt").text('');
                        $("#avgOut").text('');
                        $("#avgLight").text('');
                        $("#avgLookTv").text('');
                        $("#effectiveUseTime").text('');
                        $("#avgRead0").text('');
                        $("#avgReadDistance0").text('');
                        $("#avgLookPhone0").text('');
                        $("#avgSitTilt0").text('');
                        $("#avgOut0").text('');
                        $("#avgLight0").text('');
                        $("#avgLookTv0").text('');
                        $("#effectiveUseTime0").text('');
                        $("#d").text('');
					}
                },
                error: function (request) {
                    alert("Connection error");
                }
            });
        });
    });


    function getDetail(id,taskId,day){
        $("#d").text(day);
		$.ajax({
            cache: true,
            type: "get",
            url: url + "/api/gift/getDayDetailPC?id=" + id+"&taskId="+taskId,
            dataType: "jsonp",
            jsonp: "callback",
            async: false,
            success: function (result) {
                console.info(result);
				var data2=result.data2 || {};
				var data = result.data ||{};
				console.info(data2);
				$("#avgRead").text(getPingJI(data2.avgRead));
				$("#avgReadDistance").text(getPingJI(data2.avgReadDistance));
				$("#avgLookPhone").text(getPingJI(data2.avgLookPhone));
				$("#avgSitTilt").text(getPingJI(data2.avgSitTilt));
				$("#avgOut").text(getPingJI(data2.avgOut));
				$("#avgLight").text(getPingJI(data2.avgLight));
				$("#avgLookTv").text(getPingJI(data2.avgLookTv));
				$("#effectiveUseTime").text(getPingJI(data2.effectiveUseTime));
				$("#avgRead0").text(getPingJI(data.avgRead));
				$("#avgReadDistance0").text(getPingJI(data.avgReadDistance));
				$("#avgLookPhone0").text(getPingJI(data.avgLookPhone));
				$("#avgSitTilt0").text(getPingJI(data.avgSitTilt));
				$("#avgOut0").text(getPingJI(data.avgOut));
				$("#avgLight0").text(getPingJI(data.avgLight));
				$("#avgLookTv0").text(getPingJI(data.avgLookTv));
				$("#effectiveUseTime0").text(getPingJI(data.effectiveUseTime));

            }
        });
    }

    function getPingJI(result){
		if(result==5) return "优秀";
		else if(result==4) return "良好";
		else if(result==2) return "差";
		else if(result==1) return "极差";
		else if(result==undefined) return "";
	}
</script>
</html>



